<template>
  <div>
    <div>
      <h3>第一个页面</h3>
      <zym1></zym1>
    </div>
    <div>
      <h3>第二个页面</h3>
      <zym2></zym2>
    </div>
    <!-- Provide和Inject的使用 -->
    <div>
      <h3>第三个页面：{{d3}}</h3>
      <zym3></zym3>
    </div>
    <div>
      <h3>第四个页面：{{d4}}</h3>
      <zym4 :d4="d4" @fAdd="fAdd"></zym4>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs, provide } from "vue";
// import mitt from 'mitt'
import zym1 from "@/components/sanDianLin/父子通信子页面/子页面1";
import zym2 from "@/components/sanDianLin/父子通信子页面/子页面2";
import zym3 from "@/components/sanDianLin/父子通信子页面/子页面3";
import zym4 from "@/components/sanDianLin/父子通信子页面/子页面4";
export default {
  name: "",
  // 定义模板
  components: {
    zym1,
    zym2,
    zym3,
    zym4,
  },
  //在创建组件之前执行
  setup(props, context) {
    const state = reactive({
      name: "你好",
      d3:1,
      d4:2
    });
    const num = ref(0);
    // const emitter = mitt()

    provide('d3',state.d3)

    const fAdd = (res) => {
      console.log(res,22222)
    }
    return {
      ...toRefs(state),
      num,
      fAdd
    };
  },
};
</script>
<style scoped lang ='less'>
</style>